<template>
  <transition name="slide-fade">
    <div class="node-config-panel" v-if="node">
      <div class="panel-header">
        <h3>{{ nodeTypeConfig?.label || '节点配置' }}</h3>
        <el-button type="primary" link @click="closePanel">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>

      <div class="panel-content">
        <el-card shadow="never" class="form-card">
          <el-form label-position="top" :model="nodeProperties" label-width="100%">
            <el-form-item label="节点 ID">
              <el-input v-model="node.id" disabled />
            </el-form-item>

            <el-form-item label="节点名称">
              <el-input v-model="node.label" />
            </el-form-item>

            <template v-if="nodeTypeConfig && nodeTypeConfig.properties">
              <el-divider content-position="left">节点属性</el-divider>

              <el-form-item
                  v-for="(prop, key) in nodeTypeConfig.properties"
                  :key="key"
                  :label="prop.label"
              >
                <el-input
                    v-if="prop.type === 'string'"
                    v-model="nodeProperties[key]"
                    :placeholder="prop.description"
                />

                <el-input-number
                    v-else-if="prop.type === 'number'"
                    v-model="nodeProperties[key]"
                    :placeholder="prop.description"
                />

                <el-switch
                    v-else-if="prop.type === 'boolean'"
                    v-model="nodeProperties[key]"
                />

                <el-select
                    v-else-if="prop.type === 'select'"
                    v-model="nodeProperties[key]"
                    :placeholder="prop.description"
                >
                  <el-option
                      v-for="option in prop.options"
                      :key="option"
                      :label="option"
                      :value="option"
                  />
                </el-select>

                <el-color-picker
                    v-else-if="prop.type === 'color'"
                    v-model="nodeProperties[key]"
                />
              </el-form-item>
            </template>
          </el-form>
        </el-card>
      </div>

      <div class="panel-footer">
        <el-button type="primary" @click="saveNodeProperties">保存</el-button>
        <el-button @click="closePanel">取消</el-button>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useWorkflowStore } from '@/store/workflow';
import { getNodeTypeConfig } from '@/config/nodeTypes';
import { ElMessage } from 'element-plus';
import { Close } from '@element-plus/icons-vue';

const props = defineProps({
  node: Object,
});

const workflowStore = useWorkflowStore();
const nodeProperties = ref({});

const nodeTypeConfig = computed(() => {
  if (!props.node) return null;
  return getNodeTypeConfig(props.node.type);
});

watch(
    () => props.node,
    (newNode) => {
      if (newNode) {
        nodeProperties.value = { ...(newNode.properties || {}) };
      }
    },
    { immediate: true }
);

function saveNodeProperties() {
  if (!props.node) return;
  workflowStore.updateNodeProperties(props.node.id, nodeProperties.value);
  ElMessage.success('节点属性已保存');
}

function closePanel() {
  workflowStore.selectedNodeId = null;
}
</script>

<style scoped>
.node-config-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  background-color: #f8f9fa;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.panel-header {
  padding: 16px 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.panel-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.panel-footer {
  padding: 16px 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 卡片样式 */
.form-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
}

/* 动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
